<template>
	<view>
		<view class="table-main">
			<scroll-view class="scroll-view" scroll-y="true">
				<view class="content">
					<view class="table-header">
						<view class="table-cell" v-for="header in headers" :key="header">{{ header }}</view>
					</view>
					<view class="table-body">
						<view class="table-row" v-for="item in data" :key="item.id">
							<view class="table-cell">{{ item.name }}</view>
							<view class="table-cell">{{ item.age }}</view>
						</view>
					</view>
					<view @tap="goTop" class="uni-link uni-center uni-common-mt">
						点击这里返回顶部
					</view>
				</view>
			</scroll-view>

		</view>

		<view class="floating">
			<view class="floating-button">
				<button @click="publish">发布</button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupid: "",
				headers: ['姓名', '年龄'], // 表格表头
				data: [ // 表格数据
					{
						id: 1,
						name: '张三',
						age: 20
					}
					// 更多数据...
				],
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			};

		},
		onLoad(options) {
			if (options.id) {
				console.log('接收到的数据：', options.id);
				this.groupid = options.id
			}
		},
		methods: {
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			publish(){
				uni.navigateTo({
					url: "/pages/sub/group/publish/publish?groupid="+this.groupid
				})
			}
		}
	}
</script>

<style>
	.scroll-view {
		width: 700rpx;
		height: 500rpx;
		margin: auto;
		border: 1px solid black;
		border-color: #bbb;
	}

	.content {
		height: auto;
	}

	.table-main {
		width: 700rpx;
		height: 500rpx;
		margin: auto;
		border: 1px solid black;
		border-color: #bbb;
	}

	.table-header {
		display: flex;
		background-color: #f1f1f1;
		padding: 10rpx;
		font-weight: bold;
	}

	.table-cell {
		flex: 1;
		text-align: center;
		padding: 10rpx;
		border-bottom: 1px solid #ccc;
	}

	.table-body {
		margin-top: 10rpx;
	}

	.table-row {
		display: flex;
		padding: 10rpx;
	}

	.table-cell:last-child {
		border-right: none;
	}

	.floating {
		position: fixed;
		bottom: 10rpx;
		width: 750rpx;
		display: flex;
		justify-content: center;
		/* 将子元素水平居中 */
		align-items: flex-end;
		/* 将子元素垂直对齐到容器底部 */
		height: 100rpx;
		/* border: 1px solid black; */
	}

	.floating-button {


		width: 200rpx;
		/* 调整按钮宽度 */
		height: 100rpx;
		/* 调整按钮内文字的垂直居中 */
		font-size: 20rpx;
		/* 调整按钮文字大小 */
	}
</style>